<template>
  <div class="left-top-container">
    <!-- 时间切换按钮 -->
    <!-- <div class="time-switch">
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'year' }" 
        @click="switchTimeType('year')"
      >
        年
      </div>
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'month' }" 
        @click="switchTimeType('month')"
      >
        月
      </div>
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'day' }" 
        @click="switchTimeType('day')"
      >
        日
      </div>
    </div> -->
    
    <!-- 图表区域 -->
    <div class="chart-container">
      <div v-if="loading" class="loading-container">
        <div class="loading-text">数据加载中...</div>
      </div>
      <v-chart v-else class="chart" :option="chartOption" v-if="JSON.stringify(chartOption) !== '{}'" style="height: 100%;" autoresize />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { dateInfo } from '@/utils/dateInfo'
import { graphic } from 'echarts/core'

const activeTimeType = ref('day')
const chartOption = ref({})
const loading = ref(false)


// 功率曲线数据
const powerCurveData = ref({
  timeType: 'day',
  xData: [],
  yData: [],
  unit: 'kW'
})

// 获取功率曲线数据
const fetchPowerCurveData = async (timeType: string = 'day', regionId?: string) => {
  try {
    loading.value = true
    
    
    
      powerCurveData.value = {
        timeType: timeType,
        xData: [],
        yData: [],
        unit: 'kW'
      }
      updateChart()
    
  } catch (error) {
    console.error('API请求失败:', error)
    // 使用默认数据
    useDefaultData(timeType)
  } finally {
    loading.value = false
  }
}

// 使用默认数据（兜底方案）
const useDefaultData = (timeType: string) => {
  const defaultData = {
    year: {
      xData: ['2019', '2020', '2021', '2022', '2023', '2024'],
      yData: [1200, 1800, 2400, 3200, 4100, 4800]
    },
    month: {
      xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      yData: [320, 280, 450, 520, 680, 720, 850, 900, 750, 650, 480, 380]
    },
    day: {
      xData: ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
      yData: [0, 0, 0, 0, 0, 58, 69, 75, 82, 84, 88, 90, 100, 94, 90, 88, 72, 63, 60, 0, 0, 0, 0, 0]
    }
  }
  
  const data = defaultData[timeType as keyof typeof defaultData] || defaultData.day
  powerCurveData.value = {
    timeType,
    xData: data.xData,
    yData: data.yData,
    unit: 'kW'
  }
  updateChart()
}
const currentRegionId = ref('')

const switchTimeType = (type: string) => {
  activeTimeType.value = type
  fetchPowerCurveData(type, currentRegionId.value)
}

const updateChart = () => {
  const currentData = powerCurveData.value
  
  chartOption.value = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 30, 60, 0.9)',
      borderColor: '#00d4ff',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      },
      formatter: function(params: any) {
        const data = params[0]
        return `
          <div style="padding: 8px;">
            <div style="color: #00d4ff; font-weight: bold; margin-bottom: 4px;">${data.name}</div>
            <div style="display: flex; align-items: center;">
              <span style="display: inline-block; width: 8px; height: 8px; background: #00d4ff; border-radius: 50%; margin-right: 6px;"></span>
              瞬时功率: ${data.value} ${currentData.unit}
            </div>
          </div>
        `
      }
    },
    grid: {
      top: '15%',
      left: '8%',
      right: '8%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: currentData.xData,
      axisLine: {
        lineStyle: {
          color: '#2a5a7a'
        }
      },
      axisLabel: {
        color: '#7EB7FD',
        fontSize: 10,
        interval: 0,
        rotate: activeTimeType.value === 'day' ? 45 : 0
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#7EB7FD',
        fontSize: 10,
        formatter: `{value} ${currentData.unit}`
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(42, 90, 122, 0.3)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '瞬时功率',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        data: currentData.yData,
        lineStyle: {
          color: '#00d4ff',
          width: 3
        },
        itemStyle: {
          color: '#00d4ff',
          shadowColor: '#00d4ff',
          shadowBlur: 10
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0, 212, 255, 0.6)'
            },
            {
              offset: 1,
              color: 'rgba(0, 212, 255, 0.1)'
            }
          ])
        }
      }
    ]
  }
}

const timer = ref()

// 监听时间类型变化
watch(activeTimeType, (newType) => {
  fetchPowerCurveData(newType, currentRegionId.value)
})

// 监听区域变化
watch(currentRegionId, (newRegionId) => {
  if (newRegionId) {
    fetchPowerCurveData(activeTimeType.value, newRegionId)
  }
}, { immediate: false })

onMounted(async () => {
  await nextTick(() => {
    // 初始化加载数据
    timer.value = setTimeout(() => {
      fetchPowerCurveData(activeTimeType.value, currentRegionId.value)
      clearTimeout(timer.value)
    }, 500)
  })
})
</script>

<style lang="less" scoped>
.left-top-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

.time-switch {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  background: rgba(0, 30, 60, 0.6);
  border-radius: 20px;
  padding: 4px;
  
  .switch-btn {
    padding: 6px 16px;
    margin: 0 2px;
    border-radius: 16px;
    color: #7EB7FD;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(0, 212, 255, 0.2);
      color: #00d4ff;
    }
    
    &.active {
      background: linear-gradient(90deg, #00d4ff 0%, #0099cc 100%);
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 212, 255, 0.4);
    }
  }
}

.chart-container {
  flex: 1;
  height: 100%;
  position: relative;
  
  .loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    
    .loading-text {
      color: #7EB7FD;
      font-size: 14px;
      animation: pulse 1.5s ease-in-out infinite alternate;
    }
  }
  
  .chart {
    width: 100%;
    height: 100%;
    :deep(.vue-echarts-inner){
      div:nth-child(1){
        height: 100% !important;
      }
    } 
  }
}

@keyframes pulse {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
</style>